<template>
  <view class="pages promoters">
    <view class="content_height">
      <fu-navbar :isBack="true" title="我的团队" bgImage="https://localelife.chunchuangkeji.cn/h5img/tab/group_bg.png" color="#ffffff"></fu-navbar>
      <view class="header-wrap">
        <view class="header-bg"></view>
        <view class="header-info">
          <image :src="userInfo.head_img" class="head-img"></image>
          <view style="display: flex;flex-direction: column;">
            <text class="nickname">{{userInfo.user_nickname}}</text>
          </view>

        </view>
        <view class="rule" @click="showPopup = true">规则说明</view>
      </view>
      <view class="item-wrap">
        <view class="item-content flex justify-around align-center">
          <!-- <view class="item">
            <view class="item-num text-666"><text style="color: #333; font-weight: bold; font-size: 44rpx;">{{dataContent.trecommend || 0}}</text>人</view>
            <view class="item-title text-666">总推广人数</view>
          </view> -->
          <view class="item">
            <view class="item-num text-666"><text style="color: #333; font-weight: bold; font-size: 44rpx;">{{dataContent.month_orders || 0}}</text>单</view>
            <view class="item-title text-666">本月单量</view>
          </view>
          <view class="item">
            <view class="item-num text-666"><text style="color: #333; font-weight: bold; font-size: 44rpx;">{{dataContent.month_profits || 0}}</text></view>
            <view class="item-title text-666">本月金币</view>
          </view>
        </view>
      </view>
    </view>
	<view class="flex align-center">
		<view class="data-wrap flex justify-start align-center" @click="isShow=true">
		   <view class="data-start data-box flex justify-between align-center">
		     <view class="data-time text-333 text-sm">
		       {{start_data ? start_data : '开始日期'}}
		     </view>
		     <view class="data-img">
		       <image src="https://localelife.chunchuangkeji.cn/h5img/images/027.png" mode="widthFix"></image>
		     </view>
		   </view>
		   <view class="data-to">
		     至
		   </view>
		   <view class="data-end data-box flex justify-between align-center">
		     <view class="data-time text-333 text-sm">
		       {{end_data ? end_data : '结束日期'}}
		     </view>
		     <view class="data-img">
		       <image src="https://localelife.chunchuangkeji.cn/h5img/images/027.png" mode="widthFix"></image>
		     </view>
		   </view>
		 </view>
		 <view class="margin-left-24" style="padding-top: 32rpx;" @click="refund">重置</view>
	</view>
	<view class="bg-white" style="border-radius: 24rpx;margin: 32rpx;">
		<view class="tab-nav">
		  <text class="tab" :class="{active: current == 0}" @click="handelList(0)">全部人员 
		  <!-- ({{dataContent.trecommend}}) -->
		  </text>
		  <text class="tab" :class="{active: current == 1}"  @click="handelList(1)">一级人数 
		  <!-- ({{dataContent.recommend_count1}}) -->
		  </text>
		  <text class="tab" :class="{active: current == 2}" @click="handelList(2)">二级人数 
		  <!-- ({{dataContent.recommend_count2}}) -->
		  </text>
		</view>
		<view class="flex">
			<view class="flex flex-direction align-center flex-sub">
				<text class="text-bold font-40">{{numData.trecommend}}</text>
				<text class="text-666 font-24 text-bold margin-top-8">{{current == 0 ? '全部人数' : current == 1 ? '一级人数' : '二级人数'}}</text>
			</view>
			<view class="flex flex-direction align-center flex-sub">
				<text class="text-bold font-40">{{numData.torders}}</text>
				<text class="text-666 font-24 text-bold margin-top-8">下单量</text>
			</view>
			<view class="flex flex-direction align-center flex-sub">
				<text class="text-bold font-40">{{numData.freeze_money}}</text>
				<text class="text-666 font-24 text-bold margin-top-8">待结算</text>
			</view>
			<view class="flex flex-direction align-center flex-sub">
				<text class="text-bold font-40">{{numData.settle_money}}</text>
				<text class="text-666 font-24 text-bold margin-top-8">已结算</text>
			</view>
		</view>
		<view class="list-wrap">
		  <fu-scroll :scrollHeight="scrollHeight" @onRefresh="onRefresh" @onBottom="onBottom" ref="refresh" :isLoad="isLoad"
		    :isData="isData">
		    <view class="wrapper" style="padding-bottom: 150rpx;">
		
		    		<view class="detaiLiat">
		    			<scroll-view scroll-y
		    				@scrolltolower='loadMore'>
		    				<view class="list">
		    					<view class="list-wrap">
		    						<view class="ongg" v-for="(item, index) in dataList" :key="index" style="    border-bottom: 1px solid #EEEEEE;padding:32rpx 0;" @click="handleJump" :data-url="`/pages/distribution/distribution/commission/index?user_id=${item.id}&type=${item.identity_type}&recommends=${item.recommends}`">
		
		    							<view class="buy-left round flex">
		    								<image :src="item.head_img"  style="width:88rpx;height: 88rpx;flex-shrink: 0;" class="round"></image>
		                    <view class="info" style="margin-left: 24rpx;flex: 1;overflow: hidden;">
		                      <view class="text-cut-2 desc" style="overflow: hidden;display: flex;align-items: center;">
		                         <text class="" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 60%;">
		                         {{ item.user_nickname }}
		                       </text>
		                        <text class="tel" style="margin-left: 16rpx;">{{item.mobile}}</text>
		                        <text style="border: 1rpx solid #ED963C;height: 32rpx;padding: 0 14rpx;border-radius: 16rpx;line-height: 32rpx;color: #ED963C;font-size: 22rpx;margin-left: 15rpx;" v-if="item.identity_type_txt">{{item.identity_type_txt}}</text>
		                      </view>
		                      <view class="riqiblls" style="display: flex;align-items: center;margin-top: 18rpx;justify-content: space-between;">
		                        <view class="" style="color: #999999;font-size: 22rpx;">
		                          {{ item.create_time }}注册
		                        </view>
		                        <!-- <view class="text-999" style="font-size: 24rpx;">
		                          <text>{{item.all_people || 0}}人  {{item.all_order || 0}}单  {{item.all_money || 0}}元</text>
		                        </view> -->
		                      </view>
		                    </view>
		    							</view>
		
		
		    						</view>
		    					</view>
		    				</view>
		    				<!-- 空布局 -->
		    				<!-- <fu-empty-ui v-if="dataList.length == 0 "></fu-empty-ui> -->
		    			</scroll-view>
		    		</view>
		    	</view>
		  </fu-scroll>
		</view>
	</view>
    
    <!-- 规则弹窗 -->
    <fu-popup v-model="showPopup" mode="center" width="540rpx" height="600rpx">
    	<view class="pop-content padding">
    		<view class="text-333 text-bold text-lg text-center">规则说明</view>
    		<scroll-view class="margin-top-sm text-999" style="height: 340rpx; overflow-y: auto;" scroll-y="true"
    			@tap.stop.prevent @touchmove.stop.prevent>
    			<jyf-parser :html="fast_detaile"></jyf-parser>
    		</scroll-view>
    	</view>
    	<view class="padding-top flex align-center justify-center " @tap="showPopup = false">
    		<view class="round close-btn flex align-center justify-center"><text class="cuIcon-close text-lg"
    				style="color: #838383;margin-top:4rpx;"></text></view>
    	</view>
    </fu-popup>

    <!-- 邀请码弹窗 -->
    <fu-popup v-model="codeShow" mode="center">
      <view class="code-box">
        <image :src="codeUrl" class="code-img"></image>
      </view>
    </fu-popup>
	
	<!-- 日历弹框 start -->
	<fu-popup v-model="isShow" mode="center" :mask-close-able="true" @close="isShow=false">
	  <view class="calendar-box">
	    <fu-calendar @change="change" active-bg-color="#EC5E29" range-bg-color="#f7d4d6" :future="true" start-text=" " end-text=" " mode="range" :isDefaultDay="false" :start-time="start_data" :end-time="end_data"></fu-calendar>
	  </view>
	</fu-popup>
	<!-- 日历弹框 end -->
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
  import fuScroll from '../../components/fu-scroll/fu-scroll.vue';
  export default {
    components: {
      fuScroll
    },
    data() {
      return {
        curFilter: false,
        order: '',
        keyword: '',
        isSearch: true,
        scrollHeight: 0,
        isLoad: false,
        isData: 'more',
        dataContent: {},
        dataList: [],
        page: 1, // 页数
        size: 10, // 页条数
        dataContetn: {},
        couponModel: false,
        current: 0,
        showPopup: false,
        fast_detaile: '',
        codeShow: false,
        codeUrl: '',
		start_data: '',
		end_data: '',
		isShow: false,
		numData: {}
      };
    },
    computed: {
      userInfo() {
        return this.$store.state.userInfo
      }
    },
    mounted() {

      // let obj = uni.createSelectorQuery().in(this).select('.content_height');
      let that = this;
      this.$nextTick(function() {
        new Promise((reslove, reject) => {
          let pageHeight;
          let viewHeight;
          let heightData = {}
          uni.createSelectorQuery().in(this).select('.pages').boundingClientRect(function(data) {
            heightData.pageHeight = data.height;
            // console.log(data.height)
          }).exec();
          uni.createSelectorQuery().in(this).select('.content_height').boundingClientRect(function(data) {
            heightData.viewHeight = data.height;
            // console.log(data.height)
          }).exec();

          setTimeout(() => {
            reslove(heightData)
          }, 500)
        }).then(res => {
          // console.log(res);
          that.scrollHeight = Math.floor(res.pageHeight - res.viewHeight);
          // console.log(Math.floor(res.pageHeight - res.viewHeight))
        })

      })


    },
    onLoad() {
      console.log(this.userInfo, 111)
      this.getContent()
      this.handleSearch()
      this.getRule()
      this.getCode()
	  this.getNumber()
    },
    onPageScroll() {
      // #ifdef APP-PLUS
      uni.hideKeyboard()
      // #endif
    },

    methods: {
      // 获取邀请码
      getCode() {
        this.$api.post(global.apiUrls.post63bd1d4931c95).then(res => {
          if (res.data.code == 1) {
            this.codeUrl = res.data.data.qrcode_url
          }
        })
      },
	  refund() {
		  this.start_data = ''
		  this.end_data = ''
		  this.page = 1
		  this.isData = 'more';
		  this.getNumber();
		  this.handleSearch(true);
	  },
	  getNumber() {
		  this.$api.post(global.apiUrls.post6447360292366, {
			  type: this.current,
			  start_time: this.start_data,
			  end_time: this.end_data
		  }).then(res => {
			  if (res.data.code == 1) {
				  this.numData = res.data.data
			  }
		  })
	  },
      // 会员切换
      handelList(i){
        this.current = i
        this.page = 1
        this.isData = 'more';
		this.getNumber();
        this.handleSearch()
      },
	  change(value) {
	    if (value.isInit) return;
	    this.start_data = value.start;
	    this.end_data = value.end;
	    this.page = 1;
	    this.isData = 'more';
	    setTimeout(() =>{
	      this.isShow = false;
	    },800)
		this.getNumber();
	    this.handleSearch(true);
	  },
      //主数据
      getContent() {
        this.$api.post(global.apiUrls.post5fe69d2d1acb9).then(res => {
            console.log('推广人统计', res);
            if (res.data.code == 1) {
              this.dataContent = res.data.data
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err);
          })
      },
      getRule() {
        this.$api.post(global.apiUrls.post5d63befcb25d9, {
          category_id: 25
        }).then(res => {
          if (res.data.code == 1) {
            this.fast_detaile = res.data.data.content
          }
        })
      },
      filterClick(type) {
        if (type == 1) {
          this.curFilter = false
          this.order = ''
          this.onRefresh()
          return
        }
        this.curFilter = true
        if (this.order == 'asc') {
          this.order = 'desc'
        } else {
          this.order = 'asc'
        }
        this.onRefresh()
      },
      // 搜索
      handleSearch() {
        if (this.isData != 'more') return;
        this.isData = 'more';
        this.isLoad = true;
        let data = {
          // order: this.order,
          page: this.page,
          list_rows: this.size,
          type: this.current,
		  start_time: this.start_data,
		  end_time: this.end_data
        }
        this.$api.post(global.apiUrls.postDistributionPersonList, data)
          .then(res => {
            console.log('搜索结果', res)
            if (res.data.code == 1) {
              let totalSize = res.data.data.total;
              let list = res.data.data.data;
              if (this.page == 1) {
                this.dataList = [];
              };

              if (this.page == 1 && list.length == 0) {
                this.isData = 'noData';
                this.isLoad = false;
                this.$refs.refresh.close();
                return
              }
              this.dataList = this.dataList.concat(list);
              if (this.dataList.length >= totalSize) {
                this.isData = 'noMore';
              } else {
                this.isData = 'more';
                this.page++;
              }

            } else {
              this.isData = 'noData';
              this.$message.error(res.data.msg);
            }
            this.isLoad = false;
            this.$refs.refresh.close();
          }).catch(err => {
            this.$refs.refresh.close();
            this.isLoad = false;
            this.isData = 'noData';
            // this.$message.error(err);
          })
      },
      clear() {
        this.keyword = '';
        this.onRefresh()
      },
      // 刷新
      onRefresh() {
        console.log('刷新')
        let that = this;
        this.page = 1;
        this.isData = 'more';
        this.handleSearch();
      },
      // 加载
      onBottom() {
        // console.log('加载更多')
        this.handleSearch();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .text-right {
    text-align: right;
  }

  .text-center {
    text-align: center;
  }

  .row-reverse {
    flex-direction: row-reverse;
  }

  .active {
    color: $theme !important;
  }
  .content_height {
    background: url(https://localelife.chunchuangkeji.cn/h5img/tab/group_bg.png) no-repeat;
    background-size: 100%;
  }
  .sorting {
    padding-left: 10rpx;

    .top {
      transform: translateY(8rpx) scale(0.65);
    }

    .bot {
      transform: translateY(-4rpx) scale(0.65);
    }
  }

  .orderDesc {
    padding-top: 10rpx // position: relative;

  }

  .margin_top {
    margin-top: 14rpx;
  }

  .pages {
    background: #F8F8F8;
    // position: relative;
    // z-index: -2;
    height: 100vh;
    overflow: hidden;
  }

  .search-bg {
    background-color: #FFFFFF !important;

    .cuIcon-search {
      color: #999999;
    }
  }

  .header-wrap {
    // height: 320rpx;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40rpx;
    // .header-bg {
    //   width: 2000rpx;
    //   height: 2000rpx;
    //   position: absolute;
    //   bottom: 0;
    //   left: -625rpx;
    //   background: $theme;
    //   border-radius: 50%;
    //   z-index: 1;
    // }

    .header-info {
      position: relative;
      z-index: 2;
      width: 100%;
      font-size: 28rpx;
      color: #ffffff;
      // margin-top: 30rpx;
      display: flex;
      align-items: center;
      padding: 0 40rpx;
      .head-img {
        width: 112rpx;
        height: 112rpx;
        border-radius: 50%;
        border: 4rpx solid #fff;
        box-sizing: border-box;
      }
      .nickname {
        font-size: 36rpx;
        font-weight: bold;
        margin-left: 24rpx;
      }
    }
    .rule {
      width: 170rpx;
      height: 64rpx;
      border-radius: 32rpx 0 0 32rpx;
      background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      color: #fff;
    }
  }

  .item-wrap {
    position: relative;
    z-index: 2;
    // width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
    border-radius: 24rpx;
    background: #ffffff;
    margin: 40rpx 32rpx 0;
    padding: 0 32rpx;

    .item-content {
      // height: 189rpx;
      // text-align: center;
      border-bottom: 1rpx solid #eee;
      padding: 40rpx 0;
      &:last-of-type {
        border-bottom: 0;
      }

      .item-num {
        font-size: 24rpx;
        margin-bottom: 10rpx;
      }

      .item-title {
        font-size: 24rpx;
      }

      .item-line {
        width: 1rpx;
        height: 75rpx;
        background: #eeeeee;
      }
    }
  }
  .tab-nav {
    display: flex;
    align-items: center;
    padding: 32rpx 32rpx 40rpx;
    .tab {
      flex: 1;
      text-align: center;
      position: relative;
    }
    .active {
      color: #EC5D29;
      &::after {
        position: absolute;
        content: '';
        width: 40rpx;
        height: 8rpx;
        border-radius: 10rpx;
        background-color: #EC5D29;
        bottom: -12rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
  }

  .list-wrap {
    width: 100%;
    padding: 0 32rpx 100rpx;
    box-sizing: border-box;
    background-color: #FFFFFF;

    .list-item {
      &.title {
        margin-top: 20rpx;
        font-weight: bold;
      }

      padding: 10rpx 0;
      box-sizing: border-box;
      border-radius: 24rpx;

      .list-item-title {
        font-size: 28rpx;
        line-height: 60rpx;
        height: 60rpx;
      }

      .list-item-content {
        width: 40%;
        font-size: 24rpx;
        flex-shrink: 0;
      }
      .list-item-content:first-child{
        width: 20%;
        font-size: 24rpx;
        flex-shrink: 0;
      }

      .list-item-name {
        width: 40%;
        font-size: 24rpx;
        flex-shrink: 0;
      }
      .list-item-name:first-child{
        width: 20%;
        font-size: 24rpx;
        flex-shrink: 0;
      }

      .list-item-right {
        color: $theme;
        font-size: 36rpx;
      }
    }
  }

  .item-center {
    text-align: right;
    position: relative;
    right: -40rpx;
  }


  .search-form {
    background-color: #f5f5f5;
    line-height: 64upx;
    height: 64upx;
    font-size: 24upx;
    color: #333333;
    flex: 1;
    display: flex;
    align-items: center;
    margin: 20rpx 32upx;
    position: relative;
    z-index: 2;
  }

  .search-form+.action {
    margin-right: 30upx;
  }

  .search-form input {
    flex: 1;
    padding-right: 30upx;
    height: 64upx;
    line-height: 64upx;
    font-size: 26upx;
    background-color: transparent;
  }

  .search-form [class*="cuIcon-"] {
    margin: 0 0.5em 0 0.8em;
  }

  .search-form [class*="cuIcon-"]::before {
    top: 0upx;
  }
  .pop-content {
  	width: 540rpx;
  	height: 472rpx;
  	border-radius: 24rpx;
  	background: #ffffff;
  }

  .close-btn {
  	width: 54rpx;
  	height: 54rpx;
  	background-color: rgba(255, 255, 255, 0.6);
  }

  .code-box {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    .code-img {
      width: 460rpx;
      height: 460rpx;
    }
  }
  .data-wrap {
      padding: 32rpx 19rpx 0;
      box-sizing: border-box;
      position: relative;
      z-index: 11;
  
      .data-to {
        padding: 0 24rpx;
      }
  
      .data-box {
        width: 245rpx;
        height: 56rpx;
        border: 1px solid #bfbfbf;
        border-radius: 5rpx;
        padding: 0 20rpx;
        // box-sizing: border-box;
  
        .data-img {
          width: 30rpx;
          height: 30rpx;
          margin-top: -4rpx;
  
          image {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
    }
	// 日历弹框 start
	.calendar-box {
	  background: #ffffff;
	  border-radius: 16rpx;
	  width: 640rpx;
	  padding: 0 24rpx;
	  border: 1px solid transparent;
	}
	// 日历弹框 end
</style>
